<template>
  <div class="app-container">
    <u-page title="订单管理">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="店铺ID">
            <el-input v-model="listQuery.entityId" placeholder="店铺ID" clearable style="width: 120px;" />
          </el-form-item>
          <el-form-item label="订单唯一ID">
            <el-input v-model="listQuery.orderId" placeholder="订单唯一ID" clearable />
          </el-form-item>
          <el-form-item label="账单号">
            <el-input v-model="listQuery.innerCode" placeholder="账单号" clearable style="width: 120px;" />
          </el-form-item>
          <el-form-item label="订单状态" class="orderStatus">
            <el-select v-model="listQuery.orderStatus" placeholder="订单状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="正常状态" value="1" />
              <el-option label="并单状态" value="2" />
              <el-option label="撤消状态" value="3" />
              <el-option label="结账状态" value="4" />
              <el-option label="超时状态" value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="传输时间">
            <u-date-time-picker v-model="searchDate" @change="changeDate" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>
      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="orderDetailToJson(row, 'serviceBillVo')">账单信息</el-button>
              <el-button type="text" @click="orderDetailToJson(row, 'totalPayVo')">支付信息</el-button>
              <el-button type="text" @click="orderDetailToJson(row, 'payVoList')">支付列表</el-button>
              <el-button type="text" @click="orderDetailToJson(row, 'orderVo')">订单信息</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <u-dialog title="内容" :show.sync="jsonDialogVisible" :footer="false" width="45%" class="code">
      <el-input v-model="detailJson" autosize type="textarea" disabled placeholder="{}" />
    </u-dialog>
  </div>
</template>
<script>

export default {
  data: function() {
    return {
      api: this.$u.api.PluginsDfireOrder,
      // 表格
      columns: [
        {
          prop: 'entityId',
          label: '店铺ID',
          width: '100px'
        },
        {
          prop: 'fireDeptName',
          label: '二维火店铺名称',
          width: '200px'
        },
        {
          prop: 'innerCode',
          label: '账单号',
          width: '120px'
        },
        {
          prop: 'orderId',
          label: '订单唯一ID'
        },
        {
          prop: 'orderStatus',
          label: '订单状态',
          width: '100px',
          render: (h, params) => {
            console.log('params', params)
            if (params.row.orderStatus === '1') {
              return h('el-tag', { props: { type: 'success' }}, '正常状态')
            } else if (params.row.orderStatus === '2') {
              return h('el-tag', { props: { type: 'warning' }}, '并单状态')
            } else if (params.row.orderStatus === '3') {
              return h('el-tag', { props: { type: 'danger' }}, '撤消状态')
            } else if (params.row.orderStatus === '4') {
              return h('el-tag', { props: { type: 'success' }}, '结账状态')
            } else if (params.row.orderStatus === '5') {
              return h('el-tag', { props: { type: 'danger' }}, '超时状态')
            }
          }
        },
        {
          prop: 'receiveAmount',
          label: '实收总额',
          width: '100px'
        },
        {
          prop: 'createdAt',
          label: '传输时间',
          width: '180px',
          timestamp: true
        }

      ],

      list: [],
      listLoading: false,
      listOptions: {
        index: true,
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        entityId: '',
        innerCode: '',
        orderStatus: '',
        orderId: ''
      },
      searchDate: [],
      dialogFormVisible: false,
      dataForm: {},
      jsonDialogVisible: false,
      detailJson: {},
      jsonKeys: {
        'originReceivablesAmount': '原始应收金额',
        'agioLeastAmount': '折后最低消费',
        'agioAmount': '折后消费金额',
        'entityId': '店铺Id',
        'agioServiceCharge': '折后服务费',
        'originAmount': '原始消费金额',
        'originLeastAmount': '原始最低消费',
        'notIncludeAmount': '不计营业额总额',
        'agioTotal': '折后总金额',
        'originServiceCharge': '原始服务费金额',
        'finalAmount': '最终应收金额',
        'outFee': '外送费',
        'agioReceivablesAmount': '折后应收金额',
        'originTotal': '原始总金额',
        'reserveAmount': '预付金额',
        'promotionId': '支付优惠券ID',
        'operatorCode': '收银员编码',
        'operator': '收银员',
        'fee': '实收额',
        'payTime': '支付时间，时间戳',
        'couponCost': '每张代金券实际购买金额',
        'couponNum': '代金券使用张数',
        'isInclude': '是否计入营业额',
        'kindPayName': '付款方式',
        'charge': '找零',
        'pay': '现收金额',
        'cardId': '支付的会员卡ID',
        'kindPaySortName': '支付类型',
        'operateDate': '结账时间',
        'currDate': '发生日期',
        'receiveAmount': '实收总额',
        'resultAmount': '应付总额',
        'invoice': '开发票额',
        'sourceAmount': '原始费用',
        'couponDiscount': '券优惠金额',
        'discountAmount': '折后费用',
        'orderType': '订单类型',
        'areaName': '区域',
        'openTime': '开单时间',
        'code': '单号',
        'orderId': '订单唯一id',
        'simpleCode': '全局单号',
        'seatName': '座位名称',
        'planName': '附加费方案',
        'mobile': '手机号',
        'peopleCount': '就餐人数',
        'innerCode': '账单号',
        'planFee': '附加费',
        'seatCode': '座位CODE',
        'status': '状态',
        'customerId': '下单平台会员ID',
        'endTime': '结单时间',
        'orderFrom': '单据来源'
      }
    }
  },
  methods: {
    // 传输时间
    changeDate(item) {
      if (item) {
        this.listQuery.beginTime = item[0]
        this.listQuery.endTime = item[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    // 查看传输内容
    orderDetailToJson(row, type) {
      var content = ''
      if (type === 'serviceBillVo') { content = row.serviceBillVo } else if (type === 'totalPayVo') { content = row.totalPayVo } else if (type === 'payVoList') { content = row.payVoList } else if (type === 'orderVo') { content = row.orderVo }
      content = JSON.parse(content)
      const newContent = {}
      for (const key in content) {
        if (this.jsonKeys.hasOwnProperty(key)) { // 使用 this.jsonKeys
          newContent[this.jsonKeys[key]] = content[key]
        } else {
          newContent[key] = content[key]
        }
      }
      this.detailJson = JSON.stringify(newContent, null, '\t')
      this.jsonDialogVisible = true
    },
    created() {

      // this.hdlList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .code .el-textarea.is-disabled .el-textarea__inner {
        background-color: #060606 !important;
        color: #c6c6c6 !important;
    }

    .orderStatus .el-input {
        width: 120px;
    }
}
</style>
